{% extends 'users/base.html' %}

{% block title %}Role: {{ role.name }}{% endblock %}

{% block card_content %}
<div class="row">
    <div class="col-md-6">
        <h4>Role Information</h4>
        <table class="table table-bordered">
            <tr>
                <th>Name</th>
                <td>{{ role.name }}</td>
            </tr>
            <tr>
                <th>Created</th>
                <td>{{ role.created_at|date:"F j, Y, P" }}</td>
            </tr>
            <tr>
                <th>Last Updated</th>
                <td>{{ role.updated_at|date:"F j, Y, P" }}</td>
            </tr>
        </table>
        
        <h4 class="mt-4">Assigned Permissions</h4>
        {% if role.permissions.all %}
            <div class="permissions-list">
                {% for perm in role.permissions.all %}
                    <span class="badge bg-secondary mb-1">{{ perm.name }}</span>
                {% endfor %}
            </div>
        {% else %}
            <div class="alert alert-info">No permissions assigned to this role.</div>
        {% endif %}
    </div>
    
    <div class="col-md-6">
        <h4>Users with this Role</h4>
        {% if role.user_set.exists %}
            <div class="list-group">
                {% for user in role.user_set.all %}
                    <a href="{% url 'users:user_detail' user.pk %}" class="list-group-item list-group-item-action">
                        {{ user.get_full_name|default:user.email }}
                        <span class="badge bg-secondary float-end">
                            {{ user.department.name|default:"No Department" }}
                        </span>
                    </a>
                {% endfor %}
            </div>
        {% else %}
            <div class="alert alert-info">No users assigned to this role.</div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block card_footer %}
<div class="btn-group">
    <a href="{% url 'users:role_list' %}" class="btn btn-secondary">
        <i class="fas fa-arrow-left"></i> Back to List
    </a>
    {% if request.user.is_superuser %}
    <a href="{% url 'users:role_update' role.pk %}" class="btn btn-warning">
        <i class="fas fa-edit"></i> Edit Role
    </a>
    <a href="{% url 'users:role_delete' role.pk %}" class="btn btn-danger"
       onclick="return confirm('Are you sure you want to delete this role?')">
        <i class="fas fa-trash"></i> Delete Role
    </a>
    {% endif %}
</div>
{% endblock %}